<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <button>测试拦截器</button>
  <script>
    /* 
      为什么要设计拦截器语法
      1. 所有请求都携带一个特定的请求头
      2. 所有请求发出去前打印一个日志输出
      3. 所有请求成功的value都是响应体, 直接得到response.data
      4. 所有请求失败了, 我做一个统一的错误提示
      */

    //添加请求拦截器
    axios.interceptors.request.use(
      function (config) {
        console.log('请求拦截器成功回调', config)
        return config;
      },
      function (error) {
        console.log('请求拦截器失败回调', error)
        return Promise.jeject(error);
      }
    )

    //添加响应拦截器
    axios.interceptors.response.use({
      function (response) {
        console.log('响应拦截器成功回调', response);
        return response;
      },
      function (error) {
        console.log('响应拦截器失败回调', error);
        return Promise.reject(error);
      }
    })

    // const btn = document.querySelector('button');


    //   btn.onclick=()=>{
    //     axios({
    //       url:'http://localhost:8081/delay-server/aaa',
    //       method:'POST',
    //       params:{a:1,b:2},
    //       data:{c:3,d:4}
    //     }).then(
    //       response=>console.log('具体请求的成功回调',response),
    //       error=>console.log('具体请求的失败回调',error)
    //     )
    //   }
    /* 
    执行顺序:
      1.请求拦截器回调
      2.发请求
      3.响应拦截器回调
      4.具体请求的回调

    将四个任务串联执行  => promise的then的链式调用
    axios(config)
        - Promise.resolve(config)  // 创建value为config的成功promise
        - 利用.then()串连执行上面的4个任务
    */

  //   Promise.resolve(config)
  //     //必须返回config => 要交给发请求的回调
  //     .then((config) => config, error => {})//请求拦截器
  
  //     .then((config) => { //发ajax请求

  //       return new Promise((resolve, reject) => {
  //         // 根据config来创建并配置xhr对象, 发异步ajax请求
  //         // 如果成功了,  创建一个数据对象作为value: response = {data: JSON.parse(xhr.responseText), status, statusText}
  //         // 调用resolve(response)
  //         // 如果失败了 创建一个数据对象为reason: error = new Error('request error status=' + xhr.status)
  //         // 调用reject(error)
  //       })
  //     })

  //     .then(response => { //响应拦截器
  //       // return response //默认
  //       return response.data //具体请求的成功回调得到的就是响应体数据
  //     }, error => {
  //       // throw error //主动抛出异常
  //       return Promise.reject(error)
  //     })

  //     .then(value => {//具体请求回调
  //       /* 默认是response,但修改的是response.data */ }, error => {}) //具体请求回调
   </script>
</body>

</html>